上一篇(自我學習 - Vue 與 index.html)

條件判斷與迴圈

今天要學的是條件判斷 v-if 跟迴圈 v-for 的使用

v-if 使用

在想要判斷的標籤上面加上 v-if，像是這樣

//注意：要把標籤放到相對應得 id 裡面呦！！
<h1 v-if="isSeen">判斷是否顯示</h1>
//這個 isSeen 是使用下面 data 裡面的變數

在上一篇文章中有提到 data:{} 那我們在裡面新增一個布林變數

data:{
    isSeen:flase
}

打開網頁後會發現！咦怎麼沒有出現 h1 標籤，那是因為 isSeen 是 False ，現在把 isSeen 的布林值改成 True 這樣就可以看到 h1 標籤摟！

有了 v-if 便是可以做許多的事情了呢！！！

v-for 使用

現在我們來處理多個資料

先來看看我們的資料方面

data:{
    user:[
        {name:'Lucy',email:lucy@gmail.com},
        {name:'Amy',email:amy@gmail.com},
        {name:'Peter',email:peter@gmail.com},
    ],
},

這些資料可以怎麼呈現呢？

在需要顯示的標籤上面加入，看到下面的 v-for="user in users" 這個部分跟 foreach 是一樣的操作方式，那我們在從 user 裡面的 name 或是 email 取出資料後就可以直接放到 h1、h2 裡面了！

//注意：要把標籤放到相對應得 id 裡面呦！！
<div v-for="user in users">
    <h1>{{ user.name }}</h1>
    <h2>{{ user.email }}</h2>
</div>

大家快點試試看，之後會慢慢的帶大家了解 Vue 的一些用法，到後期還會做出像是 Trello 的工作看板